<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div>
    <input id="serialNumber" type="text" placeholder="请输入路桩序列号">
    <button onclick="select()">查询</button>
    <button onclick="reset()">重置</button>
    <button onclick="clearAll()">清屏</button>
</div>

<div class="col-sm-12 wrapper wrapper-content animated fadeInRight">
    <div class="row" id="show">


    </div>
</div>


<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script>

    var serialNumber = document.getElementById("serialNumber");

    function clearAll() {
        var divA = document.getElementById("A");
        var fatherDiv = divA.parentElement;
        fatherDiv.removeChild(divA);
    }

    //按钮重置功能
    function reset() {
        serialNumber.value = "";
    }

    function select() {

        if (isNaN(serialNumber.value)) {
            return alert("数据格式错误");
        }

        if (serialNumber.value.length != 22) {
            return alert("长度错误");
        }


        $.ajax({
            url: "show?serialNumber=" + serialNumber.value,
            type: "get",
            dataType: 'json',
            success: function (data) {
                if (data.code == 0) {
                    var html = '  <div id="A" class="col-sm-4">' +
                        '<div class="ibox">\n' +
                        '                <div class="ibox-title">\n' +
                        '                    <h5>路桩序列号查询结果:\t' + serialNumber.value + '</h5>\n' +
                        '                </div>\n' +
                        '                <div class="ibox-content">\n' +
                        '                    <b>所属高速:</b>\t' + data.data.high_speed_road + '<br>\n' +
                        '                    <b>管养单位:</b>\t' + data.data.management_unit + '<br>\n' +
                        '                    <b>所属路段:</b>\t' + data.data.section_name + '<br>\n' +
                        '                    <b>路段起点:</b>\t' + data.data.start_name + '<br>\n' +
                        '                    <b>路段终点:</b>\t' + data.data.end_name + '<br>\n' +
                        '                    <b>上/下行:</b>\t' + (data.data.up_or_down == '0' ? '上行' : '下行') + '<br>\n' +
                        '                    <b>所在车道:</b>\t' + data.data.lane + '<br>\n' +
                        '                    <b>路桩编号:</b>\t' + data.data.stake_index + '<br>\n' +
                        '                </div>\n' +
                        '         </div></div>';
                    $("#show").append(html);
                } else {
                    return alert(data.msg);
                }
            },
        });
    }

</script>


</body>
</html>